<script setup lang="ts">
import { onMounted, ref } from "vue";
import CanvasTable from "./../../src/index";
import Mock from "mockjs";

const rootRef = ref();
const selectMask = ref({})
onMounted(() => {
  new CanvasTable(rootRef.value, {
    columns: [
      { title: "序号", dataindex: "id" },
      { title: "中文名", dataindex: "name" },
      { title: "英文名", dataindex: "en_name" },
      { title: "身份证号", dataindex: "code" },
      { title: "年龄", dataindex: "age" },
      { title: "详细地址", dataindex: "address" },
      { title: "邮政编码", dataindex: "e_code" },
      { title: "IP", dataindex: "ip" },
      { title: "邮箱", dataindex: "email" },
      { title: "备注说明", dataindex: "desc" },
      { title: "修改日期", dataindex: "update_time" },
    ],
    dataSource: Mock.mock({
      // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
      "list|200-300": [
        {
          // 属性 id 是一个自增数，起始值为 1，每次增 1
          "id|+1": 1,
          "name": "@cname",
          "en_name": () => Mock.Random.first() + ' ' + Mock.Random.last(),
          "code": () => Mock.Random.id(),
          "age|18-98": 50,
          "address": "@city(true)",
          "email": "@email",
          "e_code": () => Mock.Random.zip(),
          "desc": () => Mock.Random.cparagraph(1, 10),
          "ip": "@ip",
          "update_time": "@date('yyyy-mm-dd HH:mm:ss')"
        },
      ],
    }).list,
    event: {
      onclick: ({ width, height, left, top }) => {
        selectMask.value = {
          width, 
          height,
          left,
          top
        }
      }
    }
  });
});
</script>

<template>
  <div ref="rootRef">
    <div class="select-mask" :style="{
      width: selectMask.width + 'px',
      height: selectMask.height + 'px',
      left: selectMask.left + 'px',
      top: selectMask.top + 'px',
    }"></div>
  </div>
  
</template>

<style scoped>
div {
  height: 100vh;
  margin: auto;
  position: relative;
}
:deep(canvas+canvas){
  display: block;
  margin-top: -1px;
}

.select-mask{
  position: absolute;
  z-index: 1;
  background-color: rgba(66, 100, 237, 0.3);
  pointer-events: none;
}
</style>
